<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品购物</title>
    <style>
        .box1 table {
            margin: 30px 0;
        }

        img {
            width: 120px;
            height: 100px;
        }

        .box2 table {
            margin: 30px 0;
        }
    </style>
</head>

<body>
    <div class="box1">
        <h1>商品列表</h1>
        <input type="text" class="search">
        <button class="searchbtn">搜索</button>
        <table border="1px" cellspacing=0 style="width: 1000px;">
            <thead>
                <tr>
                    <th>商品图片</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <div class="box2">
        <h1>购物车</h1>
        <button>清空购物车</button>
        <table border="1px" cellspacing=0 style="width: 1200px;">
            <thead>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>商品图片</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div>总价：￥0</div>
        <button>结算</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 商品列表初始数据
        arr = [
            {
                id: 1,
                photo: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/2207629895384/O1CN01wvqODw1pdvTf5wDkr_!!4611686018427381464-0-item_pic.jpg_360x360q90.jpg_.webp',
                name: '按摩椅',
                price: 20
            },
            {
                id: 2,
                photo: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/O1CN013JhOCR1y8cbmh7K51_!!0-paimai.jpg_360x360q90.jpg_.webp',
                name: '五粮液',
                price: 10
            },
            {
                id: 3,
                photo: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/2216549072286/O1CN01Bbo0Fo1Sl2NkI2oKV_!!0-item_pic.jpg_580x580q90.jpg_.webp',
                name: '手表',
                price: 40
            }
        ]


        // 商品列表数据渲染
        function data() {
            $('.box1 tbody').html('')
            arr.forEach((item, index) => {
                $('.box1 tbody').append(
                    `<tr>
                        <th><img src="${item.photo}" alt=""></th>
                        <th>${item.name}</th>
                        <th>${item.price}</th>
                        <th><button data-id=${item.id}>加入购物车</button></th>
                     </tr>`)
            });

        }
        data()


        // 商品列表查找,只能找商品名字搜索
        var arr1 = []
        $('.searchbtn').click(() => {
            var rel = $('.search').val()
            console.log(rel);
            arr.forEach(item => {
                if (item.name.includes(rel)) {
                    $('.box1 tbody').html('')
                    arr1.push(item)
                    $('.box1 tbody').append(
                        `<tr>
                           <th><img src="${item.photo}" alt=""></th>
                           <th>${item.name}</th>
                           <th>${item.price}</th>
                           <th><button>加入购物车</button></th>
                        </tr>`)
                }
            })
        })


        // 购物车渲染
        function shoppingCar() {
            $('.box2 tbody').html(``)
            arr2.forEach((item, index) => {
                $('.box2 tbody').append(`
                <tr>
                    <th><input type="checkbox"></th>
                    <th><img src="${item.photo}" alt=""></th>
                    <th>${item.name}</th>
                    <th>${item.price}</th>
                    <th>
                        <button>-</button>
                        <span>1</span>
                        <button>+</button>
                    </th>
                    <th><button class="delBtn" data-index=${item.id}>删除</button></th>
                </tr>
                `)
            })
        }



        // 加入购物车,使用事件委托
        var arr2 = []
        $('.box1 tbody').click((e) => {
            if (e.target.nodeName == 'BUTTON') {

                var productId = e.target.dataset.id
                // console.log(productId);
                var product = arr.find(item => item.id == productId)
                // console.log(product);

                // 查看商品是否已经存在
                var existingProducts = arr2.find(item => item.id == product.id)
                if (existingProducts) {
                    alert('商品已经存在')
                } else {
                    arr2.push(product)
                }
            }
            // console.log(arr2);
            shoppingCar()
        })


        $('.box2 tbody').click((e) => {
            // 删除
            if (e.target.nodeName == 'BUTTON' && e.target.innerHTML == '删除') {
                var id = e.target.dataset.id
                var delProduct = arr.find(item => item.id == id)
                arr2.splice(id - 1, 1)
                shoppingCar()
            } else if (e.target.nodeName == 'BUTTON' && e.target.innerHTML == '+') {

                var someoneQuantity = Number(e.target.previousElementSibling.innerHTML)
                if (someoneQuantity >= 0) {
                    (e.target.previousElementSibling).innerHTML = someoneQuantity + 1
                }
            } else if (e.target.nodeName == 'BUTTON' && e.target.innerHTML == '-') {
                // 数量减1

                var someoneQuantity = e.target.nextElementSibling.innerHTML
                // console.log(someoneQuantity);
                if (someoneQuantity > 0) {
                    (e.target.nextElementSibling).innerHTML = someoneQuantity - 1
                }
            } FF

        })





    </script>
</body>

</html>